<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--<link rel="Shortcut Icon" href="__ROOT__/favicon.ico">-->
    <link rel="stylesheet" href="__STATIC__/layui/js/scrolltop/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
    <title>{$page_title|default='小韦云'}</title>
    <style>
        body{background: #f2f2f2;height:100%;width: 100%;}
        *{padding: 0;margin: 0;box-sizing: border-box;}
        .an-nav,.an-nav .layui-nav-side{width: 220px;}
        .an-nav{background: #20222A;height:100%;position: fixed;left:0;top:0;z-index: 99;}
        .an-nav .logo{line-height:50px;color: #fff;text-align: center;font-size: 20px;height:50px;}
        .an-nav .layui-nav-side{top:50px;}
        .an-nav .layui-nav {border-radius:0px;background: #20222A;margin-bottom: 20px;}

        .an-nav .layui-nav-item a {height: 50px;line-height: 50px;padding-left: 45px;padding-right: 30px;position: relative;}
        .an-nav .layui-nav-item>a {padding-top: 8px;padding-bottom: 8px;height: 50px;line-height:36px;}
        .an-nav .layui-nav-item  .layui-icon {position: absolute;top: 50%;left: 20px;margin-top: -18px;}

        .an-header{left:220px;position: fixed;top:0;width: 100%;line-height: 50px;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);height:50px;z-index: 99;padding-right: 220px;background: #fff;}
        .an-header .header-1{float:left;margin-right:5px;}
        .an-header .header-1{background-color: #fff;color: #555;padding: 0;}
        .an-header .header-1 .layui-nav-item {line-height: 50px;}
        .an-header .header-1 .layui-nav-item a {color: #555;}
        .an-header .header-1 .layui-nav-item a {text-align: center;padding: 0 20px;}
        .an-header .header-1 .layui-nav-img {margin-right: 0;}
        .an-header input{line-height: 50px;margin-left: 20px;border:0;}

        .an-header .header-2{float:right;margin-right:5px;}
        .an-header .header-2{background-color: #fff;color: #555;padding: 0;}
        .an-header .header-2 .layui-nav-item {line-height: 50px;}
        .an-header .header-2 .layui-nav-item a {color: #555;}
        .an-header .header-2 .layui-nav-item a {text-align: center;padding: 0 15px;}
        .an-header .header-2 .layui-nav-img {margin-right: 0;}
        .an-header .header-2 .layui-nav-child {top: 50px;}

        .an-body{margin-top:50px;padding-left: 220px;height:calc(100% - 50px);overflow: hidden;position: absolute;top:0;width: 100%;}
        .an-iframe{margin: 10px;width: calc(100% - 20px);box-sizing: border-box;height:calc(100% - 60px);}

        .an-bottom{position: absolute;bottom:0;left:220px;background: #fff;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);z-index: 99;height:40px;line-height: 38px;width: calc(100% - 220px);}
        .an-bottom span{margin-left: 20px;display: inline-block;}
        .layui-layer-title{background: #409EFF!important;color: #fff!important;}

        .an-big-body .an-nav.an-hide-left,
        .an-big-body .layui-nav-side.an-hide-left{width: 0;}
        .an-big-body .an-header.an-hide-left{left:0;padding-right: 0;}
        .an-big-body .an-body.an-hide-left{padding-left:0;}
        .an-big-body .an-bottom.an-hide-left{left:0;width:100%;}

        .mCSB_inside > .mCSB_container {margin-right: 6px;}
        .mCSB_scrollTools {width: 8px;}

        .an-view .layui-layer-content{padding: 20px;width: 640px;margin: 0 auto;}
        @media screen and (max-width:640px){
            .content-2 .box-1{display: none;}
            .an-nav.an-hide-left,
            .layui-nav-side.an-hide-left{width: 0;}
            .an-header.an-hide-left{left:0;padding-right: 0;}
            .an-body.an-hide-left{padding-left:0;}
            .an-bottom.an-hide-left{left:0;width:100%;}
            .layui-nav .layui-nav-item.click-nav,
            .layui-nav .layui-nav-item.click-db,
            .layui-nav .layui-nav-item.click-config{display: none;}
            .an-header .header-2 .layui-nav-item a {padding: 0 10px;}
        }
        .layui-nav-side{display: none;}
    </style>
</head>
<body>
<div class='an-nav an-hide-left'>
    <div class='logo'>{$page_title|default='小韦云'}</div>
    {volist name='menus' id='one'}
    <ul class="layui-nav layui-nav-tree layui-nav-side an-hide-left mCustomScrollbar" id="one_{$one.id}">
        {volist name='one.child' id='two'}
        <li class="layui-nav-item layui-nav-itemed">
            {empty name="two.child"}
            <a href="javascript:;" data-url = "{$two.url}">
                {notempty name="two.icon"}
                <i class="{$two.icon}"></i>
                {/notempty}
                {$two.title}</a>
            {else /}
            <a href="javascript:;">
                {notempty name="two.icon"}
                <i class="{$two.icon}"></i>
                {/notempty}
                {$two.title}</a>
            <dl class="layui-nav-child">
                {volist name='two.child' id='three'}
                <dd><a href="javascript:;" data-url = "{$three.url}">
                    {notempty name="three.icon"}
                    <i class="{$three.icon}"></i>
                    {/notempty}
                    {$three.title}</a></dd>
                {/volist}
            </dl>
            {/empty}
        </li>
        {/volist}
    </ul>
    {/volist}
</div>

<div class="an-header an-hide-left">
    <ul class="layui-nav header-1">
        <li class="layui-nav-item click-nav"><a href="javascript:;"><i class="layui-icon">&#xe668;</i></a></li>

        {volist name='menus' id='vo'}
            <li class="layui-nav-item"><a href="javascript:;" data-url="{$vo.url}" data-id="{$vo.id}">
                {notempty name="vo.icon"}
                <i class="{$vo.icon}"></i>
                {/notempty}
                {$vo.title}</a></li>
        {/volist}
    </ul>
    <ul class="layui-nav header-2">
        <li class="layui-nav-item"><a href="{:url('shop/pc/index')}">前台</a></li>
        <li class="layui-nav-item"><a href="javascript:;" class='user-name'>{$myinfo['nickname']}</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;" data-url="{:url('admin/user/updatepassword')}">修改密码</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;" data-url="{:url('admin/page/user_info')}">
            <img src="{$myinfo['headimgurl']}" class="layui-nav-img">
        </a></li>
        <li class="layui-nav-item"><a href="{:url('admin/user/logout')}">退出</a></li>
    </ul>
</div>
<div class="an-body an-hide-left"><iframe src="{:url('admin/index/main')}" frameborder="0" class='an-iframe'></iframe></div>

<div class="an-bottom an-hide-left">
    <span><a href="https://www.bctos.cn" target="_blank">www.bctos.cn</a></span>
    <span>本系统由<a href="###" target="_blank">小韦云</a>强力驱动</span>
    <span><a href="{:url('admin/index/index')}">返回 <i class="layui-icon">&#xe68e;</i></a></span>
</div>

<script src="__STATIC__/layui/js/jquery/jquery.anan.js"></script>
<script src="__STATIC__/layui/layui.js"></script>
<script src="__STATIC__/layui/js/scrolltop/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
    //写入cookie
    function setCookie(name, value) {
        var Days = 30;
        var exp = new Date();
        exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
    }

    $(".layui-nav-itemed a").click(function(){
        var url = $(this).data('url');
        if(url){
            $(".an-body iframe").attr('src', url)
            sessionStorage.setItem('iframeLastSideUrl', url);
        }else{
            //layer.msg('该菜单地址异常，无法跳转，请在菜单管理中设置正确的网址或应用名');
        }
    })
    $(".an-header a").click(function(){
        var id = $(this).data('id')
        $('.layui-nav-side').hide();
        $('#one_'+id).show();

        var url = $(this).data('url');
        if(url){
            $(".an-body iframe").attr('src', url)
            sessionStorage.setItem('iframeLastTopUrl', url);
        }else{
            //layer.msg('该菜单地址异常，无法跳转，请在菜单管理中设置正确的网址或应用名！');
        }
    })

    $(function(){
        //初始化菜单
        var iframeLastSideUrl = sessionStorage.getItem('iframeLastSideUrl')
        var iframeLastTopUrl = sessionStorage.getItem('iframeLastTopUrl')
        var iframeLastClickUrl = sessionStorage.getItem('iframeLastClickUrl')
        var iframe = ''
        //初始化顶部菜单
        if(iframeLastTopUrl){
            $(".an-header a").each(function(){
                var url = $(this).data('url');
                if(url==iframeLastTopUrl){
                    var id = $(this).data('id')
                    $('#one_'+id).show();
                    iframe = url
                    $(this).addClass('layui-this')
                }
            })
        }else{
            $('#one_0').show();
        }
        //初始化边栏菜单
        if(iframeLastSideUrl){
            $(".layui-nav-itemed a").each(function(){
                var url = $(this).data('url');
                if(url==iframeLastSideUrl){
                    iframe = url
                    console.log($(this).parent().prop("tagName"))
                    if($(this).parent().prop("tagName")=='DD'){
                        $(this).parent().addClass('layui-this')
                    }else{
                        $(this).addClass('layui-this')
                    }

                }
            })
        }
        //优先使用iframe内部点击过的URL
        if(iframeLastClickUrl){
            iframe = iframeLastClickUrl
        }

        if(iframe){
            console.log('iframe',iframe)
            $(".an-body iframe").attr('src', iframe)
        }


        layui.use(['element', 'layer'], function () {
            var element = layui.element;
            var layer = layui.layer;
        });
    })

    //左侧菜单控制
    var navBool = true;
    $(".click-nav").click(function(){
        if(navBool==true){
            $('body').addClass('an-big-body');
        }else{
            $('body').removeClass('an-big-body');
        }
        navBool = !navBool;
    })

    //窗口改变的时候
    window.onresize = function () {
        if ($('body').width() <= 1280) {
            navBool = false;
            $('body').addClass('an-big-body');
        }else{
            navBool = true;
            $('body').removeClass('an-big-body');
        }
    }
</script>
</body>
</html>